<template>
    <div style="background-color:#202124; padding-bottom: 30px;">
        <div class="blog-container">
            <div class="blog-header">
                <div class="biBox">
                    <div class="bili"></div>
                </div>
                <div class="header-top">
                    <div class="avatar-box"></div>
                    <div class="avatar">
                        <div class="block"><el-avatar :size="100" :src="$store.getters.avatar"></el-avatar></div>
                    </div>
                    <div style="width: 88%;">
                        <div class="user-info">
                            <div class="user-name">
                                {{ $store.getters.name }}
                            </div>
                            <div class="user-edit">
                                <el-button round size="small" icon="el-icon-edit" @click="openEditUser()">编辑资料</el-button>
                                <!-- <el-button>hahahah</el-button> -->
                            </div>
                        </div>
                        <div style="    font-size: revert; font-family: monospace;">
                            <div style="margin-bottom: 15px;">加入社区时间：{{ userInfo.createTime }}</div>
                            <div>博客简介：{{ $store.getters.name }}的个人空间</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="blog-main">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="我的文章" name="first">
                        <myArticle ref="first" lazy></myArticle>
                    </el-tab-pane>
                    <el-tab-pane label="浏览记录" name="second">
                        <!-- <myArticle ref="second" lazy></myArticle> -->
                    </el-tab-pane>
                </el-tabs>
            </div>
            <editUser ref="editUser"></editUser>
        </div>
    </div>
</template>

<script>
import { getUserInfo } from "~/api/user"
import myArticle from '~/pages/article/myArticle'
import editUser from "./components/editUser.vue"
export default {
    name: "userInfo",
    components: { myArticle, editUser },
    data() {
        return {
            activeName: 'first',
            userInfo: {}
        };
    },
    methods: {
        openEditUser(){
            this.$refs.editUser.open()
        },
        handleClick(tab, event) {
            this.$nextTick(() => {
                this.$refs[this.activeName].getList()
            })
        },
        getUserInfo() {
            getUserInfo().then(res => {
                this.userInfo = res.data
            })
        }
    },
    created() {
        this.getUserInfo()
        this.$nextTick(() => {
            this.$refs[this.activeName].getList()
        })
    }
};
</script>

<style scoped>
.el-main {
    padding: 10px 20px 20px 20px;
}
::v-deep .el-tabs__header{
    padding: 20px 20px 10px 20px;
    position: sticky;
    height: 100%;
    top: 0;
    background-color: white;
    z-index: 1000;
    margin: 0 !important;
}

.header-top {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.avatar {
    padding: 5px;
    border-radius: 100%;
    background: #f0f0f2;
    width: 110px;
    height: 110px;
    margin-left: 2%;
    position: absolute;
    top: -10%;
}

.avatar-box {
    width: 110px;
    height: 110px;
    margin-left: 2%;
}

.user-info {
    margin-top: 15px;
    height: 30%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.user-name {
    font-family: cursive;
    font-size: 24px;
    font-weight: 600;
}

.user-edit {
    margin-right: 20px;
}


.blog-container {
    width: 80%;
    margin: 0 auto;
}

.header-top {
    width: 100%;
    height: 150px;
    background-color: white;
    box-shadow: #eaeaea 0px 0px 10px;
    border-radius: 10px;
}

.blog-main {
    /* padding: 20px; */
    background-color: white;
    margin-top: 20px;
    border-radius: 5px;
    overflow: auto;
    height: 500px;
    box-shadow: #eaeaea 0px 0px 10px;
    /* margin-bottom: 30px; */
}

.biBox {
    width: 100%;
    /* border: 1px saddlebrown solid; */
    /* animation: cat2 5s  infinite; */
}

/* bili娘 */
.bili {
    /* border: 1px solid red; */
    width: 142px;
    height: 100px;
    margin-left: auto;
    margin-right: 10%;
    background: url(~/assets/img/bili.png) no-repeat;
    animation: cat 0.8s steps(7) infinite;
}

@keyframes cat {
    0% {
        /* transform: translateX(0); */
        background-position: 0px;

    }

    100% {
        /* transform: translateX(100%); */
        background-position: -1000px;
    }
}


@keyframes cat2 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0%);
    }
}
</style>